<script lang="ts" setup>
import {useRouter, useRoute} from "vue-router"
import {ref} from "vue"
import {addComment, mainattr, mainCommentPage, mainNewsDetail, putAttr} from "../serve"
import {ElMessage} from "element-plus"

const
    route = useRoute(),
    router = useRouter(),
    item:any = ref({}),
    tely = ref(''),
    rateN = ref(5),
    load = ref(true),
    fromData = ref({size: 5, page: 1}),
    plData:any = ref({})
;

function get() {
  const id = route.query['id']
  if (id) {
    mainNewsDetail(id).then((r: any) => {
      // console.log(r)
      item.value = r
      load.value = false
      getComm()
    })
  } else {
    router.push('/').catch(() => true)
  }
}

get()

function attrChange() {
  // positionVisible.value = true
  // return
  if (item.value['isCollection'] == null) {
    ElMessage({type: 'error', message: '您未登录，请先登录！', duration: 1000})
    router.push('/login').catch(()=>true)
    return
  } else if (item.value['isCollection'] == false) {
    mainattr({relateId: item.value['articleId'], type: item.value['type']}).then(() => {
      ElMessage({type: 'success', message: '收藏成功！', duration: 1000})
      item.value['isCollection'] = true
    })
  } else {
    putAttr({relateId: item.value['articleId'], type: item.value['type']}).then(() => {
      ElMessage({type: 'success', message: '取消成功！', duration: 1000})
      item.value['isCollection'] = false
    })
  }
}
function getComm() {
  mainCommentPage({...fromData.value,"type": item.value['type'], "relateId": item.value['articleId']}).then((r:any)=>{
    plData.value = r
    load.value = false
  }).catch(()=>load.value = false)
}
function addCommentChange() {
  addComment({"type": item.value['type'], "relateId": item.value['articleId'], "content": tely.value, "rating": rateN.value}).then(()=>{
    ElMessage({type: 'success', message: '评论成功！', duration: 1000})
    tely.value = ''
    rateN.value = 5
    getComm()
  })
}
</script>

<template>
  <el-scrollbar v-loading="load" element-loading-text="加载中...">
    <div style="width: 100%;height: 5px;background-color: #F5F5F5;"/>
    <img :src="item['isCollection']?'/love1.svg':'/love.svg'" alt="" rt @click="attrChange">
    <h1 style="text-align: center;margin-top: 60px;">{{ item['title'] }}</h1>
    <div style="text-align: center;margin-top: 20px;">
      <span>{{ item['createdAt'] }}</span>
      <span style="margin-left: 20px;">来源：{{ item['categoryName'] }}</span>
    </div>
    <div style="padding: 25px 50px 50px 50px;margin-bottom: 50px;">
      <div v-html="item['content']"/>
    </div>
    <!-- 分隔线 -->
    <div class="divider">
      <span class="divider-line"></span>
      <h1 class="divider-text">留言</h1>
      <span class="divider-line"></span>
    </div>
    <el-input :rows="5" v-model="tely" placeholder="请输入留言" style="width: 60%;margin-left: 30px;" type="textarea"/>
    <el-rate size="large" v-model="rateN" style="margin-left: 40px;"/>
    <span class="subly" @click="addCommentChange">发送</span>
    <div v-for="(i,index) in plData['list']" lyif :key="index">
      <div :style="{ backgroundImage: `url(${i['avatar']?i['avatar']:'/Logo.svg'})` }" class="left"/>
      <div class="right">
        <div a style="font-weight: bold;"><span>{{ i['nickname'] }}</span>
          <el-rate v-model="i['rating']" size="small" style="margin-left: 15px;"/>
        </div>
        <div a>{{ i['createdAt'] }}</div>
        <div a>{{ i['content'] }}</div>
      </div>
    </div>
  </el-scrollbar>
</template>

<style lang="scss" scoped>
[rt] {
  cursor: pointer;
  width: 30px;
  position: fixed;
  left: 50px;
  margin-top: 30px;
}

[scig] {
  text-align: center;
  margin: 20px 0;

  [ig] {
    width: 300px;
    height: 380px;
    border-radius: 10px;
  }
}
.divider {
  display: flex;
  align-items: center;
  margin: 50px 0 50px 0;
  justify-content: center;

  .divider-line {
    height: 3px;
    width: 100px;
    border-radius: 2px;
    background: #5DCDFF;
  }

  .divider-text {
    padding: 0 12px;
    //color: #8898aa;
    //font-size: 12px;
    color: #555555;
  }
}

.subly {
  margin-left: 50px;
  background-color: #5DCDFF;
  //width: 100px;
  padding: 15px 30px;
  border-radius: 10px;
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 5px;
  cursor: pointer;
}

[lyif] {
  display: flex;
  justify-content: start;
  margin: 30px;
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 20px;

  .left {
    width: 60px;
    height: 60px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border-radius: 5px;
    gap: 20px;
  }

  .right {
    flex: 1;
    font-size: 14px;
    color: #666666;
    margin-left: 15px;

    [a] {
      margin-bottom: 5px;
    }
  }
}
</style>